import React, { Component } from 'react';
import '../css/iconfont.css'
import '../css/login.scss'


class login extends Component {
    constructor (props){
        super(props)
        this.state={
            mobile:"",
            msgcode:"",
            checkedState:true,
            eorr:false
        }
    }
/*     handleMobile=(e) => {
        // console.log(e.target.value)
        this.setState({
            mobile:e.target.value
        })
    }
    handleMsgCode=(e) => {
        // console.log(e.target.value)
        this.setState({
            msgcode:e.target.value
        })
    }
    changeState=(e) => {
        // console.log(e.target.checked)
        this.setState({
            checkedState:e.target.checked
        })

    } */
    formEvent=(e) => {
        let type=e.target.type
        // console.log(e.target.type)
        if(type==="text"){
            this.setState({
                mobile:e.target.value
            })
          
        }else if(type==="number"){
            this.setState({
                msgcode:e.target.value
            })
        }else if(type==="checkbox"){
            this.setState({
                checkedState:e.target.checked
            })
        }else{
            alert("程序错误，请联系客服")
        }
    }
    getMsg=(e) => {
        // let v=this.state
        alert("登录成功")
        // console.log(v.mobile,v.msgcode,v.checkedState)
        
    }
    blurState=(e) => {
        let v=this.state
        if( !(/^[1][\d]{10}$/).test(v.mobile)){
            this.setState({
                eorr:true
            })
           }else{
            this.setState({
                eorr:false
            })
           
           }
        console.log("11111111")
    }
    render() {
        return (
            <div className="menu">
                <div className="menu-header">
                    <div className="header-left">
                        <i className="iconfont icon-shouye"></i>
                    </div>
                    <div className="header-mid">
                        网易严选
                    </div>
                    <div className="header-right">
                        <i className="iconfont icon-search"></i>
                        <i className="iconfont icon-cart"></i>
                    </div>
                </div>
                <div className="menu-main">
                    <div className="main-top">
                        🏀网易严选
                    </div>
                    <div className="main-contextbox">
                        <div className="user-box">
                            <input type="text" placeholder="请输入手机号码"  value={this.state.mobile} onChange={this.formEvent} onBlur={this.blurState}/>
                        </div>
                        <div className="msg_code">
                            <input type="number" placeholder="请输入短信验证码" value={this.state.msgcode} onChange={this.formEvent}/>
                            <span>获取验证码</span>
                        </div>
                        <div className={this.state.eorr?"show":"hide"}>
                            手机号码格式错误，请更换后重试
                    </div>
                        <div className="question">
                            <div className="question-left">遇到问题？</div>
                            <div className="question-right">使用密码验证登录</div>
                        </div>
                        <div className="btn" onClick={this.getMsg}>登录</div>
                        <div className="policy"><input type="checkbox" checked={this.state.checkedState} onChange={this.formEvent} />我同意<span className="pro-one">《服务条款》</span>和<span className="pro-two">《网易隐私条款》</span></div>
                    </div>
                    <div className="otherways">其他登录方式 &gt;</div>
                </div>

            </div>
        );
    }
}

export default login;